<template>
    <nav aria-label="breadcrumb" class="breadcrumb-wrap d-none d-sm-none d-md-block d-lg-block">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <span class="icon iconfont icon-zhuye"></span>
          当前位置:
        </li>
        <li class="breadcrumb-item" v-for="item in tip">
          <a v-if="item.link" :href="`#${item.link}`">{{item.name}}</a>
          <span v-else >{{getStr(item.name)}}</span>
        </li><!--
      <li class="breadcrumb-item active" aria-current="page">Library</li>-->
      </ol>
    </nav>
</template>

<script>
  import BaseClass from "@/utils/BaseClass"
  import topCom from "@/components/topCom"
  import conCom from "@/components/conCom"
  import bottomCom from "@/components/bottomCom"

  export default {
    props:['tip'],
    computed: {},
    data() {
      return {}
    },
    components: {
      topCom,
      conCom,
      bottomCom
    },
    mounted() {


    },
    methods: {
      getStr(str){
        if(str.length>4){
          return str.substr(0,4) + '...'
        } else {
          return str;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";
  .breadcrumb-wrap{
    border-bottom: 1px solid #D8D8D8;
    .height(30);
  }
  .breadcrumb {
    background-color: #fff;
    .padding(0, 0, 0, 12);
    .breadcrumb-item + .breadcrumb-item::before{
      content: '>' ;
    }
    .breadcrumb-item + .breadcrumb-item{
      a{
        font-family: MicrosoftYaHeiUI;
        font-size: 16/@size;
        color: #444444;
        letter-spacing: 0;
        text-decoration: none;
      }
     &:nth-child(2){
       &::before{
         content: '';
       }
     }
    }
    ul {
      li {
        &:first-child {
          &:before {
            content: '';
          }
        }
        breadcrumb-item::before{
          content: '' ;
        }
        &:before {
          content: '' ;
        }
        a {
          .color(#666666);
          .font-size(12);
          color: #444444;
          letter-spacing: 0;
          .iconfont {
            .margin(0, 5, 0, 0);
          }
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width:767px) {
    .breadcrumb-wrap{
      height: auto;
    }
  }

</style>
